<template>
  <div class="storeDetail" v-if='allData'>
    <div v-if='!showAllComment'>   
      <div class="banner" id="banner">
           <swiper dots-position="center" :auto='true' :duration='300' :loop='true'>
            <swiper-item class="swiper-demo-img" v-for='(item,index) in allData.PHOTOS' :key='index'>
               <img :src="allData.PHOTO_URL+item.PHOTO_PATH" alt="" />
            </swiper-item>
          </swiper>
      </div>
      <div class="goBack" @click='goBack'></div> 
      <div class="goCollect" :class='{collectActive:isSelected}' @click='changeSelect'></div> 
      <div class="shopDetail">
        <h1>4S店信息</h1>
        <div class="shopName">
          <div class="left">
            <img src="../../assets/image/cafe/store.png" alt="">
          </div>
          <div class="right">
            <h2>{{allData.SHOP_NAME}}</h2>
            <p>店名</p>
          </div>
        </div>
        <div class="shopTel">
          <div class="left">
            <img src="../../assets/image/cafe/tel.png" alt="">
          </div>
          <div class="right">
            <h2>{{allData.SERV_PHONE}}</h2>
            <p>电话</p>
          </div>
        </div>
        <div class="shopAddress">
          <div class="left">
            <img src="../../assets/image/cafe/yourLocation.png" alt="">
          </div>
          <div class="right">
            <h2>{{allData.ADDRESS}}</h2>
            <p>地址</p>
          </div>
        </div>
        <div class="shopTime">
          <div class="left">
            <img src="../../assets/image/cafe/openTime.png" alt="">
          </div>
          <div class="right">
            <h2>{{allData.SERV_START_TIME}}-{{allData.SERV_END_TIME}}</h2>
            <p>营业时间</p>
          </div>
        </div>
      </div>
      <div class="mainSpray">
        <div class="maintain" @click='goMaintainHome'>
          <div class="Mess">
            <h2>去保养</h2>
            <p>低至6.8折 ></p>
          </div>
          <img src="../../assets/image/cafe/mainTain.png" alt="">
        </div>
        <div class="spray" @click='goSpray'>
          <div class="Mess">
            <h2>去喷漆</h2>
            <p>最快4小时交车 ></p>
          </div>
          <img src="../../assets/image/cafe/spray.png" alt="">
        </div>
      </div>
      <div class="allActive" v-if='actData'>
        <h2>精彩活动</h2>
        <a href="item.LINK_URL" class="activeItem" v-for='item in actData'>
          <img :src="actCOVER_URL+item.IMG" alt="" >
          <h3>{{item.SUBJECT}}</h3>
          <p>{{item.SHARE_CONTENT}}</p>
        </a>
      </div>
      <commentheader :commentData='commentsData' :categoty='categoty' @update:select-type='selectTypes'></commentheader>
      <!-- 评论 -->
      <div class="comments">
        <div class="commentsItem" v-for='item in commentData.slice(0,4)'>
          <div class="comHead">
            <div class="star">
              <span v-for='i in Math.ceil(item.SCORE)'></span>
            </div>
            <div class="userName">{{item.USER_NAME | fiterPhone}}</div>
          </div>
          <div class="comMain">
            <div class="conTitle">
              {{item.CONTENT}}
            </div>
            <div class="comImg">
              <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
              <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
              <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
              <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
            </div>
            <div class="replayCom" v-if='item.REPLY_CONTENT'>
              <span></span>
              {{item.REPLY_CONTENT}}
            </div>
          </div>
          <div class="comFooter">
            <p>{{item.CREATE_TIME | filterTimes}}</p>
          </div>
        </div>
        <div v-if='commentData.length==0' class="noComment">
          <img src="../../assets/image/carProduct/noComment.png" alt="" />
          <p>暂无评论</p>
        </div>
        <div class="allComments" @click='goAllComment("all")' v-if='commentData.length>4'>
          查看更多评论
        </div>
      </div>
    </div>
    <allComment v-if='showAllComment' :shopId='COMP_ID' :categoty='categoty' @close-all='closeAll' :commentData='commentsData' @update:select-type='selectTypes'></allComment>
    <toast v-model="ToastVisible"><p>收藏成功</p></toast>
  </div>
</template>
<script>
/*4S门店详情*/
import {XHeader,Swiper,SwiperItem,Toast} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import commentheader from '../../components/commentHeader.vue';//评论头部
import allComment from '../../components/all-comment.vue'; //评论组件
export default {
  name:"storeDetail",
  // 数据
  data(){

    return{
      userId:'',
      phone:'',
      COMP_ID:'',//门店id
      COORDINATE:'',//经纬度
      allData:'',//所以数据
      actCOVER_URL:'',//活动封面
      actData:'',//活动数据
      commentsData:'',//评论数据即res
      commentData:'',//评论数据取前几条
      isSelected:false,//是否收藏
      ToastVisible:false,//Toast是否可见
      showAllComment:false, //是否显示全部评论
      categoty:'all'  //评论的种类
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.phone=getCookie('phone');     
    /*两种传值方式*/
    this.COMP_ID = this.$route.params.id;
    this.COORDINATE = this.$route.query.coordinate;
    let obj = {},objj = {};
    obj.COMP_ID = this.COMP_ID;
    obj.USER_ID = this.userId;
    obj.COORDINATE = this.COORDINATE;
    objj.PHONE = this.phone;
    objj.CITY = sessionStorage.getItem('city');
    objj.PAGE_NO = 1;    
    objj.PAGE_SIZE = 2;
    objj.POSITION = 2;
    //门店详情
    this.$fetchPost('/ServShopWeb/getServShopByCompId',obj).then(res=>{       
            //console.dir(res);
            this.allData = res;  
            //this.commentData = res.EVAL_ARRAYA.slice(0,2);
            if(res.IS_COLLECT == 1){
                this.isSelected = true;
            } else {
                this.isSelected = false;
            }
    },err=>console.log(err));       
    //评论详情
    let objjj = {};
    objjj.COMP_ID = this.COMP_ID;
    objjj.PAGE_NO = 1;
    objjj.PAGE_SIZE = 10;
    objjj.CATEGORY = 'all';
    this.$fetchPost('/ServCommentWeb/getCommentsByShop', objjj).then(res => {
      //console.dir(res); 
      this.commentsData = res;
      this.commentData = res.RESULT_DATA;
    }, err => console.log(err));
    //最新活动
    this.$fetchPost('/ActWeb/getEffectiveAct',objj).then(res=>{       
              //console.dir(res);        
              if(res.STATUS_CODE == 1){
                this.actCOVER_URL = res.COVER_URL;
                this.actData = res.RESULT_DATA;
              }
    },err=>console.log(err));
  },
    
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    // 子组件和父组件之间通信函数
      closeAll(){
        this.showAllComment=false;
      },
      goBack(){
        this.$router.go(-1);
      },
      selectTypes(val){
        this.categoty=val;
        this.showAllComment=true;
      },
      //切换收藏
      changeSelect(){
        //添加商店收藏
        this.$fetchPost('/UserFavoriteWeb/addShopFavorite',{USER_ID:this.userId,COMP_ID:this.COMP_ID}).then(res=>{      
                //console.dir(res);
                if(res.STATUS_CODE == 1){
                  if(!this.isSelected){
                    this.ToastVisible = true;
                  }
                  this.isSelected = !this.isSelected; 
                }                                                  
        },err=>console.log(err));
        
      },
      //去保养
      goMaintainHome(){
        let city=sessionStorage.getItem('city');
        this.$router.push('/maintainHome?city='+city);
      },
      //去喷漆
      goSpray(){
        //this.$router.push('/spray');
        location.href="http://carnt.carnettong.com:8088/CARNT//jsp/new_spray/index.html#/";
      },
      //所有评论
      goAllComment(str){
        this.showAllComment=true;
      },
      //点击图片全屏显示
      showImg (e) {
          var commentImgBg = document.createElement('div');
          commentImgBg.style.cssText = 'position: fixed;\
                                        top: 0;\
                                        left: 0;\
                                        right: 0;\
                                        bottom: 0;\
                                        z-index:999;\
                                        background-color: #000;';
          var commentImg = document.createElement('img');
          commentImg.style.cssText = 'width: 100%;\
                                      position: fixed;\
                                      left: 50%;\
                                      top: 50%;\
                                      -webkit-transform: translate(-50%,-50%);\
                                      transform: translate(-50%,-50%);'
          commentImg.src = e.target.src;
          commentImgBg.appendChild(commentImg);

          commentImgBg.onclick = function () {
            document.body.removeChild(commentImgBg)
          }
          document.body.appendChild(commentImgBg)
      }
  },
  // 子组件
  components:{
    XHeader,
    Swiper,
    SwiperItem,
    Toast,
    commentheader,
    allComment
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.storeDetail{
  background:#efeff4;
  .allActive{
    padding: 0.2rem 0.28rem;
    background: #fff;
    margin-bottom: 0.2rem;
    h2{
      font-size: 0.29rem;
      color: #000000 100%;
      text-align: left;
      padding: 0.02rem 0.1rem 0;
      border-left: 0.06rem solid #FC0D1B;
      margin-bottom: 0.3rem;
    }
    .activeItem{
      text-align: left;
      margin-bottom: 0.4rem;
      display: block;
      padding-bottom: 0.3rem;
      box-shadow: 2px 2px 15px #eee,2px -2px 15px #eee,-2px 2px 15px #eee,-2px -2px 15px #eee;
      img{
        width: 6.94rem;
        display: block;
      }
      h3{
        font-size: 0.29rem;
        color: #000;
        margin: 0.2rem 0;
        padding-left: 0.2rem;
      }
      p{
        padding-left: 0.2rem;
        font-size: 0.25rem;
        color:#787777;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .mainSpray{
    display: flex;
    margin: 0.2rem 0;
    justify-content:center;
    align-items:center;
    height: 1.42rem;
    background: #fff;
    .maintain{
      .borderRFu(#F1F1F1);
      padding-left: 0.2rem;
    }
    .maintain,.spray{
      width: 50%;
      height: 100%;
      display: flex;
      justify-content:center;
      align-items:center;
      .Mess{
        text-align: left;
        width: 60%;
        h2{
          font-size: 0.31rem;
          color: #222;
          margin-bottom: 0.1rem;
        }
        p{
          font-size: 0.21rem;
          color: #999;
        }
      }
      img{
        width: 0.82rem;
        height: 0.82rem;
      }
    }
  }
  .shopDetail{
    padding: 0.3rem 0rem 0.2rem 0.28rem;
    background: #fff; 
    h1{
      font-size: 0.29rem;
      color: #000000 100%;
      text-align: left;
      padding: 0.02rem 0.1rem 0;
      border-left: 0.06rem solid #FC0D1B;
    }
    .shopName{
      margin-top: 0.1rem;
      .borderTFu(#edede9);
    }
    .shopName,.shopTel,.shopAddress,.shopTime{
      display: flex;
      align-items:flex-start;
      padding-top: 0.25rem;
      .left{
        display: flex;
        align-items:flex-start;
        img{
          width: 0.35rem;
          height: 0.35rem;
        }
      }
      .right{
        padding-left: 0.2rem;
        text-align: left;
        h2{
          font-size: 0.3rem;
          color: #222;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        p{
          margin-top: 0.1rem;
          font-size: 0.25rem;
          color: #999;
        }
      }
    }
  }   
  .banner{
    height: 4rem;
    img{
      width: 7.5rem;
      height: 4rem;
    }
  }
  .goCollect{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background:rgba(255,255,255,.6) url(../../assets/image/cafe/collect1.png) center center no-repeat;
    background-size: 0.4rem 0.36rem;
  }
  .collectActive{
    background:rgba(255,255,255,.6) url(../../assets/image/cafe/collected1.png) center center no-repeat;
    background-size: 0.4rem 0.36rem;
  }
  .goBack{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    background:rgba(255,255,255,.6) url(../../assets/image/cafe/goBack.png) center center no-repeat;
    background-size: 0.2rem 0.37rem;
  }
  .comments{
      .borderTFu(#e3e3e3);
      background: #fff;
      padding-bottom: 0.2rem;
      h1{
        font-size: 0.3rem;
        color: #a4a6ad;
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: left;
        padding-left: 0.2rem;
        .borderBFu(#e3e3e3);
      }
      .commentsItem{
        padding:0 0.2rem;
        .borderBFu(#e3e3e3);
        .comHead{
          display: flex;
          justify-content:space-between;
          height: 0.5rem;
          line-height: 0.5rem;
          .star{
            display: flex;
            span{
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.15rem 0.05rem;
              background: url(../../assets/image/carProduct/star.png) no-repeat;
              background-size: 0.2rem 0.2rem;
            }
          }
          .userName{
            font-size: 0.2rem;
          }
        }
        .comMain{
          padding:0.1rem 0;
          .conTitle{
            text-align: left;
            font-size: 0.3rem;
            color: #1a1a1b;
          }
          .replayCom{
            width: 96%;
            padding: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.18rem auto 0.05rem;
            color: #999;
            background: #e6e6e6;
            font-size: 0.3rem;
            text-align: left;
            position: relative;
            span{
              border:0.2rem solid #e6e6e6;
              border-width: 0.2rem 0.2rem 0 0;
              transform:rotate(45deg);
              position: absolute;
              top: -0.1rem;
              left: 0.4rem;
              background: #e6e6e6;
            }
          }
        }
        .comFooter{
          padding: 0.1rem 0 0.2rem 0;
          p{
            font-size: 0.25rem;
            text-align: left;
          }
        }
      }
    }
    .allComments{
      width: 3rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.3rem;
      border:1px solid #ababab;
      border-radius: 0.6rem;
      margin: 0.4rem auto 0;
    }
    .noComment{
      padding: 0.2rem 0;
      background: #efeff4;
      img{
        width: 1.03rem;
        height: 1.33rem;
        display: block;
        margin: 0 auto 0.3rem;
      }
      p{
        font-size: 0.25rem;
        color: #999;
        padding: 0.05rem 0;
      }
    }
}
</style>